<template>
  <div class="brand_page">
    <header>
      <van-icon name="arrow-left" class="icon" @click="back" />
      <div class="search_box">
        <van-search
          shape="round"
          background="transparent"
          placeholder="搜索品牌"
        />
      </div>
      <p class="title_p">品牌主题馆</p>
      <ul class="brand_box">
        <li>
          <img src="../assets/img/brand/1.png" alt="" /><br />
          <span>贵妇牌</span>
        </li>
        <li>
          <img src="../assets/img/brand/2.png" alt="" /><br />
          <span>平价馆</span>
        </li>
        <li>
          <img src="../assets/img/brand/3.png" alt="" /><br />
          <span>成分党</span>
        </li>
        <li>
          <img src="../assets/img/brand/4.png" alt="" /><br />
          <span>敏感肌</span>
        </li>
        <li>
          <img src="../assets/img/brand/5.png" alt="" /><br />
          <span>国货馆</span>
        </li>
        <li>
          <img src="../assets/img/brand/6.png" alt="" /><br />
          <span>日韩馆</span>
        </li>
        <li>
          <img src="../assets/img/brand/7.png" alt="" /><br />
          <span>美洲馆</span>
        </li>
        <li>
          <img src="../assets/img/brand/8.png" alt="" /><br />
          <span>欧洲馆</span>
        </li>
        <li>
          <img src="../assets/img/brand/9.png" alt="" /><br />
          <span>其他地区</span>
        </li>
      </ul>
    </header>
    <main>
      <div class="background_box">
        <img class="bg" src="../assets/img/brand/bj2.png" alt="" />
        <img class="prize" src="../assets/img/brand/prize.png" alt="" />
        <p class="top_p">品牌TOP100周榜</p>
      </div>
    </main>
    <footer>
      <ul>
        <router-link
          class="nav_li"
          tag="li"
          v-for="(item, index) in navList"
          :key="item.url"
          :to="item.url"
          :class="{ active: activeNum === index }"
          @click="change(index)"
        >
          {{ item.title }}
        </router-link>
      </ul>
      <p class="message_p">
        每周一6:00发布|本期更 新于2021/05/21&emsp;&emsp;榜单规则
      </p>
      <router-view />
    </footer>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref } from "vue";
export default {
  setup() {
    const router = useRouter();
    const navList = [
      {
        title: "热度榜",
        url: "/brand/hot",
      },
      {
        title: "评分榜",
        url: "/brand/score",
      },
      {
        title: "回购率榜",
        url: "/brand/repurchase",
      },
    ];
    const activeNum = ref(0);
    const change = (i) => {
      activeNum.value = i;
    };
    const back = () => {
      router.push("/home/index");
    };
    return {
      back,
      navList,
      activeNum,
      change,
    };
  },
};
</script>

<style lang="less" scoped>
.brand_page {
  width: 100%;
  overflow: hidden;
  header {
    width: 100%;
    height: 545px;
    background-image: linear-gradient(to bottom, #69caca, #aae0e1);
    position: relative;
    .icon {
      position: absolute;
      top: 45px;
      left: 18px;
      width: 9.5px;
      height: 17px;
      color: #353534;
      font-size: 24px;
      font-weight: 600;
    }
    .search_box {
      width: 330px;
      margin-left: 40px;
      padding-top: 30px;
    }
    .title_p {
      color: white;
      font-size: 16px;
      padding-top: 30px;
      padding-left: 20px;
    }
    .brand_box {
      overflow: hidden;
      width: 100%;
      height: 420px;
      li {
        float: left;
        position: relative;
        img {
          width: 124px;
          height: 110px;
          padding-left: 10px;
          padding-right: 10px;
          padding-top: 20px;
          padding-bottom: 20px;
        }
        span {
          font-size: 14px;
          position: absolute;
          top: 105px;
          left: 35px;
          color: white;
        }
      }
    }
  }
  main {
    width: 100%;
    height: 80px;
    background: honeydew;
    .background_box {
      width: 100%;
      height: 80px;
      background: #a9e0e1;
      position: relative;
      .bg {
        width: 375px;
        height: 79px;
      }
      .prize {
        position: absolute;
        top: -30px;
        right: 35px;
        z-index: 10;
        width: 82px;
        height: 91px;
      }
      .top_p {
        color: white;
        font-size: 20px;
        position: absolute;
        top: 30px;
        left: 30px;
      }
    }
  }
  footer {
    ul {
      width: 100%;
      height: 47px;
      display: flex;
      justify-content: space-around;
      background: url(../assets/img/brand/bj3.png);
      margin-bottom: 10px;
      .nav_li {
        font-size: 16px;
        line-height: 47px;
        color: #97dad7;
      }
      .active {
        color: #5bc0c0;
        font-weight: 600;
      }
    }
    .message_p {
      font-size: 13px;
      width: 340px;
      height: 30px;
      color: #fd933d;
      margin: 0 auto;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      background: #ffefdf;
      margin-bottom: 10px;
    }
  }
}
</style>
